<template>
  <div class="login-wrapper">
    <div class="login-container">
      <video class="transparent-background" muted autoplay loop>
        <source src="@/assets/video.mp4" type="video/mp4">
        <!-- Your browser does not support the video tag. -->
      </video>
      <!-- <video width="400" src="@/assets/video.mp4" muted autoplay loop></video> -->
      <div class="login-form" :class="{ 'is-mobile': isMobile }">
        <div class="form-warp">
          <div
            style="color: #ffffff;font-size: 30px;text-align: center;position: absolute;top: -70px;left: 0;width: 100%;">
            医疗后台管理系统
            <p style="font-size: 20px;margin-top: 5px;color: #999999;">Medical backend management system</p>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            登录
            <LoginForm />
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import LoginForm from 'views/login/comp/LoginForm.vue';
import RegisterForm from './comp/RegisterForm.vue';
import LangChange from '@/components/LangChange/index.vue';
import { useI18n } from 'vue-i18n';

const store = useStore();
const { t } = useI18n();
const activeName = ref('first');
const isMobile = computed(() => {
  return store.getters['setting/isMobile'];
});

const handleClick = (val) => {
  console.log(val);
};
</script>

<style lang="scss" scoped>
.transparent-background {
  width: 100%;
  height: 60vh;
  margin-left: 7%;
  margin-top: 18vh;
  mix-blend-mode: screen;
}

.login-wrapper {
  position: relative;

  .login-container {
    background-image: url('@/assets/bargrount.png');
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 100% 100%;
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: $dark-bg-color;

    .login-form {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100vh;

      .form-warp {
        position: relative;
        width: 500px;
        padding: 1rem 2rem 0 2rem;
        margin: auto;
        background-color: rgba($color: #ffffff, $alpha: 1);
        border-radius: 8px;
        text-align: center;
        color: #000000;
        font-size: 20px;
      }

      &.is-mobile {
        width: 100%;

        .form-warp {
          width: 100%;
          margin: 0 15px;
        }
      }
    }
  }
}
</style>
